<div class="modal" tabindex="-1" role="dialog" id="modalPassword">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">Cambiar contrase&ntilde;a</h4>
				<button type="button" class="close" onclick="closeButton('modalEdit')" aria-label="Cerrar">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<form role="form" id="userFormPassword" th:object="${userFormPassword}" th:action="@{/saveuserpassword}" method="post">
					
					<input type='hidden' class='primarykey' id="idUserMonitorizaPass" th:field="*{idUserMonitorizaPass}">
					
					<div class="form-group">
						<label for="oldPassword" class="col-form-label" th:text="#{form.user.oldPassword}"></label>
						<span id="oldPassword_span" class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c badge-pill"></span>
						<input type="password" id="oldPassword" th:field="*{oldPassword}" class="form-control" />
					</div>
					
					<div class="form-group">
						<label for="password" class="col-form-label" th:text="#{form.user.password}"></label>
						<span id="password_span" class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c badge-pill"></span>
						<input type="password" id="password" th:field="*{password}" class="form-control" />
					</div>
					
					<div class="form-group">
						<label for="confirmPassword" class="col-form-label" th:text="#{form.user.confirmPassword}"></label>
						<span id="confirmPassword_span" class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c badge-pill"></span>
						<input onblur="validateConfirmPassword();" type="password" id="confirmPassword" th:field="*{confirmPassword}" class="form-control" />
					</div>
				</form>

			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" onclick="closeButton('modalPassword')">Cerrar</button>
				<button type="submit" id="passwordBtn" class="btn btn-primary">Guardar cambios</button>
			</div>
		</div>
	</div>
</div>

<script th:inline="javascript">
	function validateConfirmPassword(){
		
		var pass = $('#password').val();
	    var repass = $('#confirmPassword').val();
		var messageConfirmPassword = /*[[#{form.user.confirmPassword.pattern}]]*/ 'default';
		
		if(($('input[name=password]').val().length == 0) || ($('input[name=confirmPassword]').val().length == 0)){
			$('#invalid-confirmPassword').html(messageConfirmPassword);
			$('#invalid-confirmPassword').addClass("invalid-modal");
	    }
	    else if (pass != repass) {
	    	$('#invalid-confirmPassword').html(messageConfirmPassword);
			$('#invalid-confirmPassword').addClass("invalid-modal");
	    }
	    else {
	    	$('#invalid-confirmPassword').html('');
			$('#invalid-confirmPassword').removeClass("invalid-modal");
	    }
		
	}

	$( "#passwordBtn" ).click(function( event ) {
	  event.preventDefault();
		
	  var formData = JSON.stringify($("#userFormPassword").serializeJSON());
	  var url = /*[[@{/saveuserpassword}]]*/;
	  
	  loading();
	  
	  $.ajax({
		  type: "POST",
		  url: url,
		  data: formData,
		  success: function(data){
			hide();
			
			switch(data){
			case 0:
				$('#errorModalUser').remove();
				$('#modalPassword').modal('hide');
				break;
			case -1:
				$('#errorModalUser').remove();
				$('#userFormPassword').append('<div id="errorModalUser" class="alert alert-danger" role="alert"><strong>La contrase\u00F1a anterior debe de coincidir!</strong></div>');
				break;
			case -2:
				$('#errorModalUser').remove();
				$('#userFormPassword').append('<div id="errorModalUser" class="alert alert-danger" role="alert"><strong>Error inesperado, int\u00E9ntelo mas tarde!</strong></div>');
				break;
			default:
				if (data != null){
					jQuery.each(data, function(i, val) {
						$('#userFormPassword *').filter('span').each(function(){
							if (i == $(this).attr('id')){
								$("#" + i).text(val);
							}
						});
					});
				}
			}
		  },
		  error:function(){
			  hide();
			  $('#errorModalUser').remove();
			  $('#userFormPassword').append('<div id="errorModalUser" class="alert alert-danger" role="alert"><strong>Error inesperado, int\u00E9ntelo mas tarde!</strong></div>');
		  },
		  dataType: "json",
		  contentType : "application/json"
		});
	});
</script>